import { Empty, Image, Card, Row, Col, Typography } from "antd";
import { EyeOutlined } from "@ant-design/icons";

const { Title, Text } = Typography;

const ImageDisplay = ({ originalImage, ocrResults, processedImages }) => {
  if (!originalImage) {
    return (
      <div className="loading-container">
        <Empty
          description="请先上传试卷图片"
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        />
      </div>
    );
  }

  if (!processedImages || processedImages.length === 0) {
    return (
      <div>
        <Card
          title="原始图片"
          extra={<EyeOutlined />}
          style={{ marginBottom: 16 }}
        >
          <Image
            src={originalImage.url}
            alt="原始试卷"
            style={{ width: "100%" }}
            preview={true}
          />
        </Card>

        {ocrResults && (
          <Card title="OCR识别信息" size="small">
            <div style={{ fontSize: 12, color: "#666" }}>
              <div>
                识别文字数量: {ocrResults.originalData?.text?.length || 0}{" "}
                个字符
              </div>
              <div>
                平均置信度:{" "}
                {Math.round(ocrResults.originalData?.confidence || 0)}%
              </div>
              {ocrResults.questions && (
                <div>检测到题目: {ocrResults.questions.length} 道</div>
              )}
            </div>
          </Card>
        )}
      </div>
    );
  }

  return (
    <div>
      <Title level={4} style={{ marginBottom: 16 }}>
        切割结果 ({processedImages.length} 道题目)
      </Title>

      {processedImages.map((question, index) => (
        <div key={index} className="question-section">
          <div className="question-title">第 {index + 1} 题</div>

          <Row gutter={16}>
            {question.questionImage && (
              <Col xs={24} md={12}>
                <Card
                  size="small"
                  title="题干"
                  style={{ marginBottom: 16 }}
                  bodyStyle={{ padding: 8 }}
                >
                  <div className="question-image-item">
                    <Image
                      src={question.questionImage}
                      alt={`第${index + 1}题 - 题干`}
                      style={{ maxWidth: "100%", maxHeight: 200 }}
                      preview={true}
                    />
                    <div className="image-label">题干区域</div>
                  </div>
                </Card>
              </Col>
            )}

            {question.answerImage && (
              <Col xs={24} md={12}>
                <Card
                  size="small"
                  title="作答区"
                  style={{ marginBottom: 16 }}
                  bodyStyle={{ padding: 8 }}
                >
                  <div className="question-image-item">
                    <Image
                      src={question.answerImage}
                      alt={`第${index + 1}题 - 作答区`}
                      style={{ maxWidth: "100%", maxHeight: 200 }}
                      preview={true}
                    />
                    <div className="image-label">作答区域</div>
                  </div>
                </Card>
              </Col>
            )}
          </Row>

          {question.text && (
            <Card size="small" title="识别文字" style={{ marginTop: 8 }}>
              <Text style={{ fontSize: 12, color: "#666" }}>
                {question.text.substring(0, 100)}
                {question.text.length > 100 && "..."}
              </Text>
            </Card>
          )}
        </div>
      ))}
    </div>
  );
};

export default ImageDisplay;
